<template>
  <view>
    <view class="edgeInsetTop"></view>
    <view class="cu-bar">
      <view class="action sub-title">
        <text class="text-xl text-bold text-orange">商家入驻流程</text>
        <text class="text-ABC text-orange">Settled</text>
      </view>
    </view>
    <view class="wanl-apply margin-xl">
      <view class="flow">
        <view class="item">
          <view class="project">
            <view class="text-center">
              <view class="cu-avatar xl round solid text-black margin-tb-sm">
                <text class="wlIcon-wo"></text>
              </view>
              <view class="text-lg text-bold">
                <text>01 注册登录</text>
              </view>
            </view>
            <view class="text-min text-gray">
              <view> <text>1）进入系统注册账户</text> </view>
              <view> <text>2）设置账户密码</text> </view>
              <view> <text>3）进入PC用户中心或在本业提交申请</text> </view>
            </view>
          </view>
          <view class="point right">
            <view class="line"> </view>
            <view class="arrow"> </view>
          </view>
        </view>
        <view class="item">
          <view class="project">
            <view class="text-center">
              <view class="cu-avatar xl round solid text-black margin-tb-sm">
                <text class="wlIcon-xiugaioryijian"></text>
              </view>
              <view class="text-lg text-bold">
                <text>02 填写提交信息</text>
              </view>
            </view>
            <view class="text-min text-gray">
              <view> <text>1）选择运营主体，填写与运营主体相关资质</text> </view>
              <view> <text>2）提交店铺资质审核</text> </view>
            </view>
          </view>
          <view class="point bottom">
            <view class="line"> </view>
            <view class="arrow"> </view>
          </view>
        </view>

        <!-- <view class="item">
					<view class="project">
						<view class="text-center">
							<view class="cu-avatar xl round solid text-black margin-tb-sm">
								<text class="wlIcon-guanzhu1"></text>
							</view>
							<view class="text-lg text-bold ">
								<text>04 签署入驻协议</text>
							</view>
						</view>
						<view class="text-min text-gray">
							<view> <text>1）签署入驻协议</text> </view>
							<view> <text>2）进入PC端用户中心点击商家控制台进入后台</text> </view>
						</view>
					</view>
					<view class="point left">
						<view class="arrow"> </view>
						<view class="line"> </view>
					</view>
					<view class="point bottom">
						<view class="line"> </view>
						<view class="arrow"> </view>
					</view>
				</view> -->

        <view class="item">
          <view class="project">
            <view class="text-center">
              <view class="cu-avatar xl round solid text-black margin-tb-sm">
                <text class="wlIcon-guanzhu1"></text>
              </view>
              <view class="text-lg text-bold">
                <text>04 进行支付</text>
              </view>
            </view>
            <view class="text-min text-gray">
              <view> <text>1）进行支付支付后可进入商家后台管理</text> </view>
            </view>
          </view>
          <view class="point left">
            <view class="arrow"> </view>
            <view class="line"> </view>
          </view>
          <view class="point bottom">
            <view class="line"> </view>
            <view class="arrow"> </view>
          </view>
        </view>

        <view class="item">
          <view class="project">
            <view class="text-center">
              <view class="cu-avatar xl round solid text-black margin-tb-sm">
                <text class="wlIcon-shijian"></text>
              </view>
              <view class="text-lg text-bold">
                <text>03 等待系统审核</text>
              </view>
            </view>
            <view class="text-min text-gray">
              <view> <text>1）7个工作日内反馈审核</text> </view>
              <view> <text>2）查看审核结果，重新提交或进入下一步</text> </view>
              <view> <text>3）联系平台或等客服联系</text> </view>
            </view>
          </view>
        </view>

        <view class="item">
          <view class="project">
            <view class="text-center">
              <view class="cu-avatar xl round solid text-black margin-tb-sm">
                <text class="wlIcon-dianpu"></text>
              </view>
              <view class="text-lg text-bold">
                <text>05 管理商家</text>
              </view>
            </view>
            <view class="text-min text-gray">
              <view> <text>1）系统学习商家后台使用</text> </view>
              <view> <text>1）恭喜您！入驻成功</text> </view>
            </view>
          </view>
        </view>
      </view>
      <view class="cu-bar">
        <view class="action sub-title">
          <text class="text-xl text-bold text-orange">资质要求</text>
          <text class="text-ABC text-orange">dqizon</text>
        </view>
      </view>
      <view class="details">
        <view class="details-item">
          <view class="title">
            <text>个人店（公民身份证）</text>
          </view>
          <view class="center text-sm">
            <view> <text>1.手持身份证照片</text> </view>
            <view> <text>2.姓名、手机号、微信号</text> </view>
          </view>
        </view>
        <view class="details-item">
          <view class="title">
            <text>企业店（企业资质）</text>
          </view>
          <view class="center text-sm">
            <view> <text>1.企业营业执照复印件</text> </view>
            <view> <text>2.企业统一信用代码</text> </view>
            <view> <text>3.法人身份证正反面</text> </view>
          </view>
        </view>
        <view class="details-item">
          <view class="title">
            <text>旗舰店（商标持有方或子公司）</text>
          </view>
          <view class="center text-sm">
            <view> <text>1.企业营业执照复印件</text> </view>
            <view> <text>2.企业统一信用代码</text> </view>
            <view> <text>3.国家商标总局颁发的商标注册证或商标受理通知书</text> </view>
            <view> <text>4.法人身份证正反面</text> </view>
          </view>
        </view>
      </view>
    </view>
    <view class="safeAreaBottom"></view>
    <view class="wanlian cu-bar tabbar foot flex flex-direction">
      <button @tap="onApply()" class="cu-btn wanl-bg-orange lg">
        {{ verify_text[shopdata.verify] }} {{ shopdata.pay_status == 1 ? '已支付' : '未支付' }}
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      shopdata: { verify: 0 },
      verify_text: ['立即入驻', '入驻审核中', '入驻审核中', '已入驻 查看', '未通过审核 修改'],
      onopen: true,
      onopen2: true,
    };
  },
  onLoad() {
    let userStorage = uni.getStorageSync('wanlshop:user');
    if (!userStorage.mobile) {
      uni.showModal({
        title: '提示',
        content: '检测到您还未设置手机号码，无法登录商家后台，请先前往设置绑定手机号',
        cancelText: '取消',
        confirmText: '去设置',
        success: res => {
          if (res.confirm) {
            console.log('用户点击确定');
            // this.$wanlshop.to(`/pages/user/auth/thirdreg?event=binding&mobile=${res.userinfo.mobile}&url=${'/pages/user'}`);
            uni.navigateTo({
              url: `/pages/user/auth/thirdreg?event=binding&nickname=${userStorage.nickname}&url=${'/pages/user'}`,
            });
          } else if (res.cancel) {
          }
        },
      });
    } else {
      this.loadData();
      if (this.$store.state.user.isLogin) {
        this.loadData();
      }
    }
  },
  methods: {
    async loadData() {
      this.$api.get({
        url: '/wanlshop/shop/apply',
        success: res => {
          if (res) {
            this.shopdata = res;

            if (res.verify == 3 && this.onopen == true) {
              this.onopen = false;
              uni.showModal({
                title: '已入驻成功',
                // content: '',
                cancelText: '复制后台地址',
                confirmText: '去管理后台',
                success: res => {
                  if (res.confirm) {
                    console.log('用户点击确定');
                    this.$wanlshop.to(
                      '/pages/apps/webView?src=' + encodeURIComponent('https://zhang.ysqww.com/index/user/index.html'),
                    );
                  } else if (res.cancel) {
                    // console.log('用户点击取消');
                    uni.setClipboardData({
                      data: 'https://zhang.ysqww.com/index/user/index.html',
                      success: function () {
                        console.log('success');
                      },
                    });
                  }
                },
              });
            }
          }
        },
      });

      if (this.onopen2 == true) {
        this.onopen2 = false;
        this.$api.get({
          url: '/wanlshop/user/isPassword',
          success: res => {
            if (res == false) {
              console.log('11', res);
              uni.showModal({
                title: '提示',
                content: '检测到您还未设置登录密码，无法登录商家后台，请先前往设置修改登录密码',
                cancelText: '取消',
                confirmText: '去设置',
                success: res => {
                  if (res.confirm) {
                    console.log('用户点击确定');
                    this.$wanlshop.to('/pages/user/setting/security');
                  } else if (res.cancel) {
                  }
                },
              });
            }
          },
        });
      }
    },
    onApply() {
      this.$wanlshop.auth(`/pages/shop/apply/apply?data=${JSON.stringify(this.shopdata)}`);
    },
  },
};
</script>

<style>
.cu-bar {
  justify-content: center;
}
.wanlian.cu-bar.tabbar {
  background-color: #ffffff;
}
.wanlian.cu-bar.tabbar .cu-btn {
  width: calc(100% - 50rpx);
}
.wanlian.cu-bar.tabbar .cu-btn.lg {
  font-size: 32rpx;
  height: 86rpx;
}
.cu-form-group .title,
.cu-form-group uni-input {
  font-size: 28rpx;
}
.wanl-apply .flow {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.wanl-apply .flow .item {
  width: 46%;
  height: 590rpx;
  position: relative;
}

.wanl-apply .flow .item:last-child {
  height: 400rpx;
}

.wanl-apply .flow .item .project {
  line-height: 2.2;
}

.wanl-apply .flow .item .point {
  display: flex;
}
.wanl-apply .flow .item .point .line {
  width: 120rpx;
  height: 4rpx;
  background-color: #ccc;
}
.wanl-apply .flow .item .point .arrow {
  border: 14rpx solid transparent;
  border-left: 30rpx solid #ccc;
}

/* 指向右 */
.wanl-apply .flow .item .point.right {
  position: absolute;
  align-items: center;
  right: -110rpx;
  top: 76rpx;
}
/* 指向左 */
.wanl-apply .flow .item .point.left {
  position: absolute;
  align-items: center;
  right: -96rpx;
  top: 76rpx;
}
.wanl-apply .flow .item .point.left .arrow {
  border: 14rpx solid transparent;
  border-right: 30rpx solid #ccc;
}
/* 指向下 */
.wanl-apply .flow .item .point.bottom {
  position: absolute;
  justify-content: center;
  bottom: 0;
  right: 0;
  left: 0;
}
.wanl-apply .flow .item .point.bottom .line {
  width: 4rpx;
  height: 120rpx;
  margin-bottom: 45rpx;
}
.wanl-apply .flow .item .point.bottom .arrow {
  position: absolute;
  bottom: 0;
  border: 14rpx solid transparent;
  border-top: 30rpx solid #ccc;
}
.wanl-apply .details {
  background-color: #f1efec;
  margin: 50rpx 0;
}
.wanl-apply .details .details-item {
  display: flex;
  border-bottom: 2rpx solid #fff;
}
.wanl-apply .details .details-item .title {
  background-color: #e6e6e6;
  width: 40%;
  padding: 25rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wanl-apply .details .details-item .center {
  width: 100%;
  color: #474747;
}
.wanl-apply .details .details-item .center > view {
  border-bottom: 2rpx solid #fff;
  padding: 25rpx;
  line-height: 1.5;
}
.wanl-apply .details .details-item .center > view:last-child {
  border: 0;
}
</style>
